<template>
  <div class="app-container">
<!-- 意见反馈列表栏-->
    <el-table
      v-loading="loading"
      :data="feedbackList"
    >
      <el-table-column label="id" prop="id"/>
      <el-table-column label="商户名" prop="shopName"/>
      <el-table-column label="用户名" prop="userName"/>
      <!-- <el-table-column label="反馈内容" prop="content"/> -->
      <el-table-column label="创建时间" prop="createTime"/>
      <!-- <el-table-column label="反馈状态" prop="feedbackStatus">
        <template slot-scope="scope">
            <span v-if="scope.row.feedbackStatus==0">进行中</span>
            <span v-if="scope.row.feedbackStatus==1">已完成</span>
            <span v-if="scope.row.feedbackStatus==2">已拒绝</span>
        </template>
      </el-table-column>
      <el-table-column label="反馈类型" prop="type"></el-table-column> -->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:feedback:remove']"
          >删除</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleDetail(scope.row)"
            v-hasPermi="['system:feedback:query']"
          >反馈详情</el-button>
        </template>
        
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!--反馈详情列表弹出框-->
    <el-dialog title="反馈详情列表"  :visible.sync="open" width="700px" append-to-body>
        <el-descriptions :column="1" :colon="false">
          <el-descriptions-item><span>反馈内容：</span>&emsp;{{detailList.content}}</el-descriptions-item>
            <el-descriptions-item><span>反馈图片：</span>
              <span v-for="img in detailList.picList" :key="img">
                <el-image
                  :src="img"
                  style="width: 100px; height: 100px"
                  fit="cover"
                ></el-image>
              </span>  
            </el-descriptions-item>
        </el-descriptions>
            <!-- <el-table-column label="反馈的内容" prop="content"/>
            <el-table-column label="反馈图片" prop="picList"/> -->
            <!-- <el-table-column label="回复" prop="reply"/>
            <el-table-column label="商户id" prop="shopId"/>
            <el-table-column label="用户id" prop="userId"/>
            <el-table-column label="反馈类型" prop="type"/> -->
    </el-dialog>
  </div>
</template>

<script>
import {feedbacklist,delfeedbackId,feedbackDetail} from "@/api/feedback/feedback"

export default {
  data() {
    return {
      //总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      //意见反馈列表数据
      feedbackList: [],
      //详情列表
      detailList: [],
      // 状态数据字典
      statusOptions: [],
      //详情弹出层是否显示
      open: false,
    };
  },
    created() {
    this.getList();
  },
    methods: {
    /** 查询意见反馈列表 */
        getList() {
            this.loading = true;
            feedbacklist(this.queryParams).then((response) => {
                this.feedbackList = response.rows;
                this.total = response.total;
                this.loading = false;
        });
        },
    /** 删除按钮操作 */
        handleDelete(row) {
        const feedbackIds = row.id || this.ids;
        this.$confirm(
            '是否确认删除反馈意见编号为"' + feedbackIds + '"的数据项?',
            "警告",
            {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
            }
        ).then(function () {
            return delfeedbackId(feedbackIds);
            })
            .then(() => {
            this.getList();
            this.msgSuccess("删除成功");
            })
            .catch(() => {});
        },
    /**反馈详情按钮 */
        handleDetail(row) {
            this.detailList=[];
            const getid = row.id || this.ids;
            feedbackDetail(getid).then((response) => {
                this.detailList = response.data
                this.open = true
                console.log(typeof(this.detailList.picList))
            });

        },

    }
};
</script>

<style>
</style>
